<template>
  <div
    class="mb-4 max-w-full rounded-lg overflow-hidden shadow-sm bg-white border border-gray-200"
  >
    <!-- Header -->
    <div
      class="bg-[#F2F2F2] py-3 px-4 text-sm text-gray-800 font-medium border-b border-gray-200"
    >
      {{ type }}
    </div>

    <!-- Problems List -->
    <div class="flex flex-col">
      <div
        v-for="problem in bankTopicItemVoList"
        :key="problem.id"
        @click="navigateToProblem(problem.id)"
        class="flex justify-between items-center py-4 px-4 border-b border-gray-200 hover:bg-gray-50 transition-colors cursor-pointer group"
      >
        <!-- Left side -->
        <div class="flex items-center gap-3">
          <div class="w-5 h-5 flex items-center justify-center">
            <CheckCircle2
              v-if="problem.isDone"
              class="w-5 h-5 text-green-500"
            />
            <Circle v-else class="w-5 h-5 text-gray-300" />
          </div>
          <div
            class="text-sm text-gray-800 group-hover:text-[#057BEF] transition-colors"
          >
            {{ problem.title }}
          </div>
        </div>

        <!-- Right side -->
        <div class="flex items-center gap-4">
          <div
            :class="{
              'text-green-500': problem.difficulty === 0,
              'text-yellow-500': problem.difficulty === 1,
              'text-red-500': problem.difficulty === 2,
              'text-sm w-10 text-center': true,
            }"
          >
            {{ getDifficultyText(problem.difficulty) }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { CheckCircle2, Circle } from "lucide-vue-next";

const router = useRouter();
const props = defineProps({
  type: {
    type: String,
    default: "查询",
  },
  bankTopicItemVoList: {
    type: Array,
    default: () => [],
  },
});

const getDifficultyText = (difficulty) => {
  const difficultyMap = {
    0: "简单",
    1: "中等",
    2: "困难",
  };
  return difficultyMap[difficulty] || "未知";
};

const navigateToProblem = (problemId) => {
  router.push(`/problem/${problemId}`);
};
</script>

<style scoped></style>
